Service Workers
Se trata de un tipo de web worker particular, en sí este tipo de worker se emplea al trabajar con servidores; su función consiste en actuar de receptor de todas las peticiones que se destinen hacia el servidor, para luego procesarlas y posteriormente realizar la consulta al servidor, luego recibir la respuesta y enviarla al cliente que realizó la consulta en primer lugar.
En ese sentido realiza el papel de intermediario entre los navegadores y el servidor; debido a esto es muy común que el service worker esté repleto de "addEventListener" (escucha de eventos), para poder realizar una u otra acción según sea necesario.
Interfaz ServiceWorker
Se trata del objeto "serviceWorker" el cual es una buena práctica comprobar si este se encuentra compatible en el navegador, ya que algunos navegadores no poseen soporte para estos. Los navegadores que no admiten Service Workers son:
Internet Explorer (todas las versiones)
Opera Mini (todas las versiones)
Android Browser (todas las versiones anteriores a la 4.4.4)
Safari (todas las versiones anteriores a la 11.1 en escritorio y 11.3 en dispositivos móviles)
Cualquiera sea el caso se puede comprobar si el navegador posee el objeto "serviceWorker" de la siguiente forma:
Ejemplo
Una vez comprobada la compatibilidad con los service workers se procede a instalarlo; esto es de esta forma ya que los service workers son archivos que se ejecutan en el almacenamiento local del usuario, es decir el archivo es descargado e instalado en el equipo del usuario, lo que permite realizar acciones o ejecutar código aún si la página o el navegador se encuentran cerrados.
Esto ya que estos no forman parte del hilo normal de la página, en su lugar estos se ejecutan en el background del equipo. La declaración del service worker se realiza de la siguiente forma:
Ejemplo
Se usa el método ".register" del objeto "serviceWorker", al cual se le define la dirección del correspondiente archivo.
A la hora de trabajar con service worker se utilizan las herramientas de desarrollador, específicamente la pestaña de "Application", en el apartado de "service workers" de la siguiente forma:
Ejemplo
Llegado el momento de estructurar el código del service worker, estos cuentan con una pequeña particularidad la cual es que la palabra clave "this" no es la única alternativa a la hora de hacer referencia al documento actual; en estos, la palabra clave "self" cumple exactamente la misma función, por lo que es muy común que al trabajar dentro de los service worker se utilice "self" en lugar de "this".
Eventos y el Ciclo de vida
Install
Se dice que los service worker poseen un ciclo de vida ya que estos al crearse pasan por dos etapas. La primera de estas es la "instalación", se trata del primer evento que se acciona; esta ocurre al declararse el código de los ejemplos anteriores. La instalación sucede al detectarse que no existe el service worker en el equipo; por otro lado, debido a que estos perduran a lo largo del tiempo, este evento solo se dispara una vez, a menos que el service worker sea eliminado del equipo, entonces volverá a ocurrir.
Para detectar si el service worker se instaló en el equipo se usa el evento "install":
Ejemplo
Activate
La segunda etapa del ciclo de vida del service worker es la "Activación", en la cual se pueden realizar acciones tomando como base el evento "activate" de la siguiente manera:
Ejemplo
De este modo se utilizan los eventos "install" y "activate" para comprobar y/o ejecutar código en base a las dos etapas del ciclo de vida; sin embargo, existen otros eventos más que son necesarios a la hora de trabajar con los service worker.
Error
Un evento muy importante para los service worker es "error", el cual como se puede prever se utiliza para trabajar con cualquier error que pudiese originarse durante la ejecución.
Ejemplo
Nota: Para esto también se suele utilizar el método ".catch".
Fetch
Este último evento se utiliza para verificar si se está realizando una solicitud a este service worker; en otras palabras, cada vez que el navegador realice una y esta sea interceptada por el service worker, se ejecutará el código vinculado a este evento.
Ejemplo
PostMessage( )
Este método funciona exactamente igual que en los "dedicated workers", es decir, este método permite realizar el envío de datos entre el "web worker" y un elemento externo, ya sea este el servidor o el navegador.
Sin embargo, la ejecución de este sí se debe realizar de una forma un poco diferente, esto ya que los service workers tienen la particularidad de demorar un poco en su ejecución; para esto existe el método "ready" el cual permite esperar y comprobar si el service worker ya ha sido cargado antes de ejecutar una acción.
El método "ready" retorna una promesa, por lo tanto se obtiene un objeto "serviceWorkerRegistration" el cual contiene el service worker en el interior del método ".active".
Ejemplo
Resultado
Nota: El código de este ejemplo no se ejecuta en el service worker, sino en el documento principal, ya que es allí donde se está originando el envío de datos.
De este modo accediendo al método ".active" se puede obtener el service worker, lo que a su vez permite utilizar el método "PostMessage( )" para enviar la información al service worker.
Código del Documento Principal
Código del Service Worker
Resultado
Por otro lado, si se desea implementar una respuesta o definir un dato que sea enviado desde el service worker, se realiza un uso común de "PostMessage".
Código del Documento Principal
Código del Service Worker
Resultado
Registrar el caché y mostrar el sitio web offline
Una aplicación bastante realista sobre los service worker es el almacenarlos en la caché del equipo; para esto se emplean los elementos correspondientes, tal como se especifica en el apartado de la manipulación de la caché.
Apertura de la Caché
En este ejemplo se utiliza el evento "install" para detectar el momento en el que se instale el service worker en el equipo; al ocurrir esto se imprime un mensaje en consola, luego se abre la caché, se define el nombre del objeto y el archivo (Index.html) que este almacena, se imprime otro mensaje en consola y por último se define el manejo de errores con ".catch".
Resultado
La caché se puede considerar un recurso limitado, ya que no es lo ideal disponer mucho de este; se recomienda eliminar cualquier elemento innecesario, para esto se suele utilizar el evento "activate" de la siguiente forma:
Eliminar Caché Obsoleto
En este ejemplo se utiliza el evento "activate" para eliminar cualquier vestigio de elementos anteriores; esto se realiza accediendo a todas las keys de la caché mediante la respectiva promesa que es retornada, y utilizando el método "keys.map", el cual se trata de un método para mapear los arrays, accediendo de ese modo a las keys y eliminando cualquier elemento diferente a la versión actual del objeto.
Por último, para mostrar la página offline se utiliza el evento "fetch", en el cual se aplica el método ".respondWith( )", el cual responde con una promesa, en la cual en el siguiente caso se realiza una función que realiza la consulta; por último se aplica un condicional para determinar si se retornan los datos guardados en la caché o si en su lugar se retorna la consulta por internet.
Mostrar Offline
Extra
Para profundizar más sobre el ciclo de vida de los service workers se puede ingresar al siguiente Blog.
Nota: La sección "service worker" de la pestaña "Application" de la "herramienta de desarrollador" puede que necesite ser actualizada de forma manual para representar los cambios efectuados al proyecto; para esto se presiona el vínculo "Update" de la siguiente forma:
